/**
 * Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use "sass:color";

@use "@angular/material" as mat;

$FONT_SIZE: 12px;
$LABEL_BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 600);
$BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 100);
$LABEL_COLOR: white;
$VALUE_COLOR: black;

.label {
  margin: 0;
  font-size: $FONT_SIZE;
  font-weight: 600;
  background-color: $LABEL_BACKGROUND;
  color: $LABEL_COLOR;
  white-space: nowrap;
  text-overflow: ellipsis;

  mat-icon {
    margin-right: 3px;
    width: $FONT_SIZE;
    height: $FONT_SIZE;
    font-size: $FONT_SIZE;
  }
}

.path-container {
  max-height: 100px;
  overflow-y: scroll;

  // Force showing scrollbar
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #3f51b5;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }
}

.path {
  color: $VALUE_COLOR;
  font-size: $FONT_SIZE;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: $BACKGROUND;

  &:hover {
    background-color: color.adjust($BACKGROUND, $lightness: -5%);
    text-decoration: underline;
    cursor: pointer;
  }

  .index {
    display: inline-block;
    width: 15px;
    height: 100%;
    margin: 0.5px 3px 0.5px 0;
    background-color: color.adjust($BACKGROUND, $lightness: -10%);
    color: white;
    text-align: center;
    padding: 0 3px;
  }

  &.current {
    .index {
      background-color: mat.m2-get-color-from-palette(
        mat.$m2-indigo-palette,
        400
      );
    }
  }
}
